<template>
  <el-container>
    <el-header>
      <!-- 优化的头部布局 -->
      <el-row :gutter="20" style="height: 100%; align-items: center">
        <el-col :span="8">
          <div class="header-left">
            <el-icon class="header-icon"><helpFilled/></el-icon>
            <span class="system-title"> 智慧医疗预约挂号系统 </span>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="header-right">
            <div class="user-info">
              <el-icon class="user-avatar">
                <Avatar />
              </el-icon>
              <div class="user-details">
                <div class="user-name">
                  {{ counter.userInfo.userName || "未登录" }}
                </div>
                <div class="user-role">
                  {{ counter.userInfo.roleName || "普通用户" }}
                </div>
              </div>
            </div>
            <div class="header-actions">
              <el-button type="danger" size="small" @click="quit" class="logout-btn" :icon="CircleCloseFilled">
                退出登录
              </el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
          :default-active="route.path"
          class="el-menu-vertical-demo"
          router
        >
          <el-menu-item index="/homepage">
            <el-icon><HomeFilled /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <User />
              </el-icon>
              <span style="font-weight: bold">授权中心</span>
            </template>
            <!-- <el-menu-item v-for="item in counter.userInfo.permissions" :index="item.permissionUrl" >
          <el-icon><Management /></el-icon>
          <span>{{ item.permissionName }}</span>
        </el-menu-item> -->
            <el-menu-item index="/userlist">
              <el-icon><HelpFilled /></el-icon>
              <span>管理员管理</span>
            </el-menu-item>
            <!-- <el-menu-item index="/userlist2">
              <el-icon><UserFilled /></el-icon>
              <span>用户管理--配置菜单</span>
            </el-menu-item> -->
            <el-menu-item index="/rolelist">
              <el-icon>
                <Checked />
              </el-icon>
              <span>角色管理</span>
            </el-menu-item>
            <el-menu-item index="/permissionlist">
              <el-icon>
                <Checked />
              </el-icon>
              <span>权限管理</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><Promotion /></el-icon>
              <span style="font-weight: bold">预约管理</span>
            </template>
            <el-menu-item index="/Appointmentcenter">
              <el-icon>
                <HelpFilled />
              </el-icon>
              <span>预约挂号</span>
            </el-menu-item>
            <el-menu-item index="/DoctorSchedulingView">
              <el-icon>
                <UserFilled />
              </el-icon>
              <span>医生排班</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon><Management /></el-icon>
              <span style="font-weight: bold">费用管理</span>
            </template>
             <el-menu-item index="/outpatient-expenses">
              <el-icon><HelpFilled /></el-icon>
              <span>门诊消费记录</span>
            </el-menu-item>
            <el-menu-item index="/outpatientrecharge">
              <el-icon><HelpFilled /></el-icon>
              <span>门诊充值记录</span>
            </el-menu-item>
            <el-menu-item index="/refund-record">
              <el-icon><HelpFilled /></el-icon>
              <span>退款记录</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>
              <el-icon><HomeFilled /></el-icon>
              <span style="font-weight: bold">医院管理</span>
            </template>
            <el-menu-item index="/Doctors">
              <el-icon><HelpFilled /></el-icon>
              <span>医生管理</span>
            </el-menu-item>
            <el-menu-item index="/Departments">
              <el-icon><HelpFilled /></el-icon>
              <span>科室管理</span>
            </el-menu-item>
            <el-menu-item index="/notice-list">
              <el-icon><Document /></el-icon>
              <span>预约须知</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-main>
        <RouterView></RouterView>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { useRouter, RouterView, useRoute } from "vue-router";
import {
  ElMessage,
  type FormInstance,
  type FormRules,
  ElMessageBox,
} from "element-plus";
import axios from "axios";
const router = useRouter();
const route = useRoute();
///测试
import {
  Grid,
  Avatar,
  SwitchButton,
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  Promotion,
  StarFilled,
  LocationFilled,
  Opportunity,
  HelpFilled,
  Platform,
  User,
  UserFilled,
  Management,
  Download,
  Checked,
  MoreFilled,
  Flag,
  Search,
  Goods,
  List,
  DataAnalysis,
  CircleCloseFilled, 
  HomeFilled
} from "@element-plus/icons-vue";

//引入pinia
import { useCounterStore } from "@/stores/counter";
//pinia变量
const counter = useCounterStore();

//退出登录
const quit = () => {
  //友好提示
  ElMessageBox.confirm("确定退出登录吗?", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "error",
  })
    .then(() => {
      //点击确定
      //清楚信息
      counter.userInfo.userId = 0;
      counter.userInfo.userName = "";
      counter.userInfo.userNickname = "";
      counter.userInfo.roleName = "";
      counter.userInfo.roleId = 0;
      counter.userInfo.permissions = [];
      //跳转至 登录
      router.push("/");
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "退出已取消!",
      });
    });
};
</script>

<style>
.el-header {
  /* 智慧医疗主题渐变色 */
  background: linear-gradient(135deg,
      #1e3a8a 0%,
      #3b82f6 30%,
      #06b6d4 60%,
      #10b981 100%);
  height: 60px;
  line-height: 60px;
  /* 调整文字颜色以适应渐变背景，增强可读性 */
  color: #ffffff;
  /* 添加轻微阴影增强层次感 */
  box-shadow: 0 2px 12px rgba(30, 58, 138, 0.15);
  /* 添加顶部装饰条 */
  position: relative;
  /* 固定头部，确保始终可见 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
  /* 优化用户信息显示 */
  padding: 0 20px;
}

.el-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
      #1e3a8a 0%,
      #3b82f6 25%,
      #06b6d4 50%,
      #10b981 75%,
      #34d399 100%);
}

.el-aside {
  /* 智慧医疗主题侧边栏背景 */
  background: linear-gradient(180deg,
      rgba(30, 58, 138, 0.03) 0%,
      rgba(59, 130, 246, 0.06) 50%,
      rgba(6, 182, 212, 0.03) 100%);
  /* 固定侧边栏，适应页面高度 */
  position: fixed;
  top: 60px;
  left: 0;
  bottom: 0;
  width: 220px;
  height: calc(100vh - 60px);
  overflow-y: auto;
  border-right: 1px solid rgba(59, 130, 246, 0.15);
  box-shadow: 2px 0 12px rgba(30, 58, 138, 0.08);
  z-index: 999;
}

.el-menu {
  border-right: none;
  background: transparent;
  /* 智慧医疗主题菜单样式 */
}

/* 菜单项样式 */
.el-menu-item {
  color: #1e3a8a;
  font-weight: 500;
  transition: all 0.3s ease;
  margin: 2px 8px;
  border-radius: 8px;
}

.el-menu-item:hover {
  background: linear-gradient(135deg,
      rgba(30, 58, 138, 0.1) 0%,
      rgba(59, 130, 246, 0.15) 100%);
  color: #1e40af;
  transform: translateX(2px);
}

.el-menu-item.is-active {
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(30, 58, 138, 0.3);
}

/* 子菜单样式 */
.el-sub-menu .el-sub-menu__title {
  color: #1e3a8a;
  font-weight: 600;
  transition: all 0.3s ease;
  margin: 2px 8px;
  border-radius: 8px;
}

.el-sub-menu .el-sub-menu__title:hover {
  background: linear-gradient(135deg,
      rgba(30, 58, 138, 0.1) 0%,
      rgba(59, 130, 246, 0.15) 100%);
  color: #1e40af;
  transform: translateX(2px);
}

.el-sub-menu.is-opened .el-sub-menu__title {
  background: linear-gradient(135deg,
      rgba(30, 58, 138, 0.08) 0%,
      rgba(59, 130, 246, 0.12) 100%);
  color: #1e40af;
}

/* 子菜单项样式 */
.el-sub-menu .el-menu-item {
  padding-left: 50px !important;
  margin: 1px 8px;
}

/* 图标样式 */
.el-menu .el-icon {
  color: #3b82f6;
  margin-right: 8px;
}

.el-menu-item.is-active .el-icon {
  color: #ffffff;
}

.el-sub-menu .el-sub-menu__title .el-icon {
  color: #3b82f6;
}

/* 主内容区域样式调整 */
.el-main {
  margin-left: 220px;
  margin-top: 60px;
  padding: 24px;
  min-height: calc(100vh - 60px);
  background: #f8f9fa;
}

/* 确保容器布局正确 */
.el-container {
  min-height: 100vh;
}

/* 头部左侧样式 */
.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-icon {
  font-size: 24px;
  color: #ffffff;
  opacity: 0.9;
}

.system-title {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 1px;
}

/* 头部右侧样式 */
.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  height: 100%;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.user-info:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.user-avatar {
  font-size: 20px;
  color: #ffffff;
  opacity: 0.9;
}

.user-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-name {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.2;
}

.user-role {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.2;
}

.header-actions {
  display: flex;
  align-items: center;
}

.logout-btn {
  height: 32px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.logout-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.logout-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
</style>
